﻿@model Zor_Web.Models.Sincerity.V_SincerityTotal
@using Webdiyer.WebControls.Mvc;
@using Zor_Tools;
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>诚信统计</title>
    <link href="~/Content/LayerUI/src/css/layui.css" rel="stylesheet" />
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Styles/zor.css" rel="stylesheet" />
    <!-- 框架必要 -->
    <script src="~/Content/Scripts/jquery/jquery-1.9.1.min.js"></script>
    <script src="~/Content/Scripts/learunui-framework.js"></script>
    <script src="~/Content/Scripts/Zor_AJax.js"></script>    
    <!-- 日期选择器 -->
    <script src="~/Content/laydate/laydate.js"></script>
    <!-- 消息提示 -->
    <script language='javascript' src='~/Content/layer/layer.js'></script>
    <!--Echerts -->
    <script src="~/Content/Scripts/Echart/echarts.min.js"></script>
</head>
<body>
    <div style="padding:0px 20px;">
        <form action="/Sincerity/SincerityTotal" method="post">
            <div class="layui-form-pane" style="margin-top: 15px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">开始日期：</label>
                    <div class="layui-input-inline" style="width:100px">
                        <input name="startTime" class="layui-input" placeholder="开始日期" id="startTime" value="@TempData["startTime"]" readonly>
                    </div>
                    <label class="layui-form-label">截止日期：</label>
                    <div class="layui-input-inline" style="width:100px">
                        <input name="endTime" class="layui-input" placeholder="截止日期" id="endTime" value="@TempData["endTime"]" readonly>
                    </div>
                    <div class="layui-input-inline" style="padding-top:5px;">
                        <input type="submit" value="查询" class="layui-btn layui-btn-normal layui-btn-small" />                        
                    </div>
                </div>
            </div>

        </form>
    </div>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="HrCharts" style="padding:10px;"></div>
</body>
</html>

<script>

        $(function () {
            laydate.skin('molv');         //日历皮肤
            var start = {                   //开始时间选择
                elem: "#startTime",
                format: "YYYY-MM-DD",
                min: '1900-01-01',
                max: "2099-06-16",
                istime: false,
                istoday: true,
                choose: function (datas) {
                    end.min = datas;
                    end.start = datas
                }
            };
            var end = {                     //结束时间选择
                elem: "#endTime",
                format: "YYYY-MM-DD",
                min: '1900-01-01',
                max: "2099-06-16",
                istime: false,
                istoday: true,
                choose: function (datas) { start.max = datas }
            };
            laydate(start);
            laydate(end);
        });
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = document.getElementById('HrCharts');

        var myChartContainer = function () {
            myChart.style.width = (window.innerWidth - 50) + 'px';
            myChart.style.height = (window.innerHeight) + 'px';
        };
        myChartContainer();
        var names = "";

        getAjax("/Sincerity/GetNames", "", function (data) {
            names = eval(data);
        })
        var cnts = "";
        getAjax("/Sincerity/GetCnts", "", function (data) {
            cnts = eval(data);
        })
        var eChart = echarts.init(myChart);

        option = {
            title: {
                text: '诚信统计总览图',
                left:'center',
                subtext: '@TempData["startTime"] 至 @TempData["endTime"]'
            },
            legend: {
                data: ['诚信数/条']
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {                   
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: names,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    mini: 0,
                    interval: 1
                }
            ],
            series: [
                {
                    name: '诚信数',
                    type: 'bar',
                    barWidth: '50',
                    data: cnts
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChart.setOption(option);
        //浏览器大小改变时重置大小
        window.onresize = function () {
            myChartContainer();
            eChart.resize();
        };
    });
</script>
